<template>
  <div class="catemanager">
    <hmheader title="频道管理">
      <span slot="left"
            class="iconfont iconjiantou2"
            @click="$router.back()"></span>
    </hmheader>
    <div class="mychannel">
      <h3>点击删除频道</h3>
      <div class="list">
        <span v-for='(value,index) in cateList'
              :key='value.id'
              @click="remove(index,value)">{{value.name}}</span>
      </div>
    </div>
    <div class="youchannel">
      <h3>点击添加频道</h3>
      <div class="list">
        <span v-for='(value,index) in tempList'
              :key='value.id'
              @click="add(index,value)">{{value.name}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import hmheader from "@/components/hmheader.vue";
import { getCateList } from '@/apis/category.js'
export default {
  data () {
    return {
      cateList: [], // 所有栏目数据
      tempList: [] // 未添加的栏目数据
    }
  },
  components: {
    hmheader
  },
  methods: {
    remove (index, value) {
      // 先添加再移除
      this.tempList.push(value)
      // 将已移除的栏目存储到本地存储,约定 heimatoutiao_remove_cate_59
      localStorage.setItem('heimatoutiao_remove_cate_59', JSON.stringify(this.tempList))

      this.cateList.splice(index, 1)
      // 将已移除的栏目存储到本地存储,约定 heimatoutiao_add_cate_59
      localStorage.setItem('heimatoutiao_add_cate_59', JSON.stringify(this.cateList))
    },
    add (index, value) {
      // 先添加再移除
      this.cateList.push(value)
      localStorage.setItem('heimatoutiao_add_cate_59', JSON.stringify(this.cateList))
      this.tempList.splice(index, 1)
      localStorage.setItem('heimatoutiao_remove_cate_59', JSON.stringify(this.tempList))
    }
  },
  async activated () {
    // 组件加载之后，应该先从本地存储中获取数据，如果有数据，则加载本地存储，如果没有数据再发起数据请求
    // 如果指定名称的键不存在，下面的代码获取到了null,并不会报错
    this.cateList = JSON.parse(localStorage.getItem('heimatoutiao_add_cate_59'))
    if (!this.cateList) {
      let res = await getCateList()
      console.log(res);
      // 判断用户是否登陆
      this.cateList = res.data.data
      if (localStorage.getItem('toutiao_59_token')) {
        // this.cateList = res.data.data.slice(2)
        this.cateList.splice(0, 2)
      } else {
        this.cateList.splice(0, 1)
      }
    }
    // 加载 未添加的栏目
    this.tempList = JSON.parse(localStorage.getItem('heimatoutiao_remove_cate_59')) || []
  }
}
</script>

<style lang="less" scoped>
.mychannel,
.youchannel {
  padding: 10px;
  h3 {
    line-height: 30px;
    font-weight: bold;
  }
  .list {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    > span {
      width: 20%;
      margin-left: 10px;
      margin-top: 10px;
      border: 1px solid #ccc;
      text-align: center;
      line-height: 40px;
    }
  }
}
</style>